<template>
  <div>

      <div v-for="(v,i) in this.$store.state.mym.arr" :key="i">
          
          <div class="top">
          <span @click="funb()">&lt;</span>
          <span class="user_balance">账户余额</span>
      </div>
      <div class="amount">
          <div class="tupiao"><img src="myimg/yue.png" alt=""></div>
          
          <p class="amount_money">{{v.user_balance}}</p>
          <p>总余额（元）</p>
          <p>明细&gt;</p>
       </div>
        <div class="blocked">
         <span >{{v.amount_money}}</span>
         <span >0</span>
          <span class="two">可用余额（元）</span>
          <span class="two">冻结余额（元）</span>

       </div>

        <div class="bottom">
           <button @click="funa()">门店充值</button>
       </div>

      </div>

  </div>
</template>

<script>
export default {
    mounted(){
        this.$store.dispatch("mymData",{url:"/data/account"});
        // 
    },
    methods:{
        funb(){
            this.$router.go(-1)
        },
        funa(){
            console.log(this.$store.state.mym.arr)
        }
    }

}
</script>

<style scoped>
.top{
    background: #44489b;
    color: white;
    width: 3.75rem;
    height: 0.88rem;
    font-size: 0.2rem;
}
.top span{
    display: inline-block;
    width: 2.5rem;
    height: 0.8rem;
    text-align: center;
    line-height: 0.8rem;
    /* margin-left: 0.1rem; */
}
.top span:nth-child(1){
    width: 0.6rem; 
}
/* .amout{
    width: 3.58rem;
    height: 1rem;
    margin: auto;
    border: 1px solid red;
} */

.tupiao{
    width: 3.58rem;
    height: 1rem;
    margin: auto;
    /* border: 1px solid red; */
    display: flex;
    justify-content: center;
    align-items: center;
}
.amount p:nth-child(2){
    width: 3.58rem;
    height: 0.54rem;
    line-height: 0.54rem;
    margin: auto;
    text-align: center;
    font-size: 0.28rem;
    
}
.amount p:nth-child(3){
    width: 3.58rem;
    height: 0.4rem;
    color: gray;
    font-size: 0.16rem;
    line-height: 0.4rem;
    text-align: center;
    /* border: 1px solid blue; */
    margin: auto;
    
}
.amount p:nth-child(4){
    width: 3.58rem;
    height: 0.56rem;
    color: blue;
    font-size: 0.16rem;
    line-height: 0.56rem;
    text-align: center;
    /* border: 1px solid blue; */
    margin: auto;
    
}
.blocked{
    width: 3.58rem;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.blocked span{
    width: 50%;
    height: 0.2rem;
    text-align: center;
}
.blocked span:nth-child(1),.blocked span:nth-child(2){
    font-size: 0.2rem;
    color: #000;

}
.blocked span:nth-child(3),span:nth-child(4){
    font-size: 0.12rem;
    color: gray;
    
}
.bottom{
    width:3.22rem ;
    height: 1rem;
    /* border: 1px solid green; */
    margin: auto;
    

}
.bottom button{
    width:3.22rem ;
    height: 0.38rem;   
    background-color: #7285bf;
    margin: auto;
    color: white;
    font-size: 0.14rem;
    border-radius: 0.18rem;
    margin-top: 0.3rem;
    border: none;
    outline: none;
}

</style>